// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/callout';
@import '~@mozilla-protocol/core/protocol/css/templates/multi-column';

.c-compare-header {
    background-color: transparent;
    position: relative;

    &::after {
        background: $color-marketing-gray-20;
        bottom: 0;
        box-shadow: 0 0 2px 0 $color-marketing-gray-60;
        content: '';
        display: block;
        height: 10px;
        position: absolute;
        width: 100%;
    }

    @media #{$mq-lg} {
        background:
            url('/media/img/firefox/compare/header-left.svg') left -10% top no-repeat,
            transparent url('/media/img/firefox/compare/header-right.svg') right -10% top no-repeat;
        background-size: auto 100%, contain;
        padding: $layout-lg 0;
    }

    @media #{$mq-xl} {
        background-position: left top, right top;
    }
}

.mzp-c-callout.mzp-t-content-md {
    .mzp-l-content {
        max-width: $content-md;
    }
}

.c-compare-item {
    margin-bottom: $layout-xs;

    a {
        color: get-theme('body-text-color');
        display: block;
        border: 1px solid $color-light-gray-30;
        border-radius: $border-radius-md;
        padding: $spacing-md;
        text-decoration: none;
        transition: border-color 150ms ease;

        &:hover,
        &:focus,
        &:active {
            border-color: get-theme('link-color-hover');
            color: get-theme('body-text-color');

            .c-compare-item-title {
                text-decoration: underline;
            }

            .c-compare-item-cta {
                color: get-theme('link-color-hover');
            }
        }
    }

    @media #{$mq-md} {
        display: contents;
        margin-bottom: 0;
    }
}

.c-compare-item-title {
    @include text-title-2xs;
}

.c-compare-item-cta {
    margin: 0;
    color: get-theme('link-color');
    text-decoration: underline;

    :visited & {
        color: get-theme('link-color-visited');
    }
}
